<template>
  <div class="index">
    <!-- 导航栏 -->
    <van-nav-bar left-text="结婚服务全能助手" fixed />
    <div class="search">
      <!-- 顶部搜索框 -->
      <van-search v-model="value" show-action placeholder="请输入搜索关键词">
        <template #left>
          <span @click="chooseAddress">郑州 ∨</span>
        </template>
        <template #action>
          <van-icon name="search" size="18px" />
        </template>
      </van-search>
    </div>
    <van-popup
      v-model="show"
      round
      position="bottom"
      :style="{ height: '40%' }"
    >
      <van-area :area-list="areaList" :columns-num="2" />
    </van-popup>
    <div class="body">
      <div class="grid">
        <van-grid :column-num="5">
          <van-grid-item
            icon="https://qnm.hunliji.com/o_1fs03qf8i1p7062nq141mju11gj9.png"
            text="婚纱照"
          />
          <van-grid-item
            icon="https://qnm.hunliji.com/o_1fs04emvu18c94t21ucr1ier1mdj9.png"
            text="热门旅拍"
          />
          <van-grid-item
            icon="https://qnm.hunliji.com/o_1fs03mbld5i61du15gq16rnp6r9.png"
            text="婚宴酒店"
          />
          <van-grid-item
            icon="https://qnm.hunliji.com/o_1fs03sgh61q8n178ae0r1gc815g49.png"
            text="婚礼策划"
          />
          <van-grid-item
            icon="https://qnm.hunliji.com/o_1fs0436liceqs8rkahmt41fpe9.png"
            text="钻戒三金"
          />
          <van-grid-item
            icon="https://qnm.hunliji.com/o_1fs0417detdhhegjio1qmkeo49.png"
            text="婚纱礼服"
          />
          <van-grid-item
            icon="https://qnm.hunliji.com/o_1fs044mvh1k61nurdq11d7n197r9.png"
            text="婚礼主持"
          />
          <van-grid-item
            icon="https://qnm.hunliji.com/o_1fs0469f41it83os11321obb1rmh9.png"
            text="婚礼跟妆"
          />
          <van-grid-item
            icon="https://qnm.hunliji.com/o_1fs04820bv3mncqcro1hb83gc9.png"
            text="婚礼摄像"
          />
          <van-grid-item
            icon="https://qnm.hunliji.com/o_1fs049v8dg4q1sj1nfhm66iht9.png"
            text="婚礼摄影"
          />
        </van-grid>
      </div>
      <div class="tabs">
        <van-tabs v-model="active1" sticky offset-top="46px">
          <van-tab title="精选">
            <div class="img" v-for="(item, i) in img" :key="i.id">
              <img :src="item" alt="" />
            </div>
          </van-tab>
          <van-tab title="发现">
            <div class="img" v-for="(item, i) in img1" :key="i.id">
              <img :src="item" alt="" />
            </div>
          </van-tab>
          <van-tab title="婚照">
            <div class="img" v-for="(item, i) in img2" :key="i.id">
              <img :src="item" alt="" />
            </div>
          </van-tab>
          <van-tab title="旅拍">
            <div class="img" v-for="(item, i) in img3" :key="i.id">
              <img :src="item" alt="" />
            </div>
          </van-tab>
          <van-tab title="婚庆"> </van-tab>
          <van-tab title="婚宴">
            <van-card
              v-for="j in hunyan"
              :key="j.id"
              :price="j.price + '/桌 起'"
              :desc="j.desc"
              :title="j.title"
              :thumb="j.thumb"
            >
              <template #tags>
                <van-tag plain type="danger">{{ j.tags }}</van-tag>
              </template>
            </van-card>
            <van-card
              v-for="j in hunyan"
              :key="j.lid"
              :price="j.price + '/桌 起'"
              :desc="j.desc"
              :title="j.title"
              :thumb="j.thumb"
            >
              <template #tags>
                <van-tag plain type="danger">{{ j.tags }}</van-tag>
              </template>
            </van-card>
          </van-tab>
          <van-tab title="婚纱">
            <div class="img" v-for="(item, i) in img3" :key="i.id">
              <img :src="item" alt="" />
            </div>
          </van-tab>
          <van-tab title="婚戒"></van-tab>
        </van-tabs>
      </div>
    </div>

    <!-- 底部导航栏 -->
    <van-tabbar v-model="active">
      <van-tabbar-item to="/" icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item to="/linggan" icon="fire-o">婚礼灵感</van-tabbar-item>
      <van-tabbar-item to="/yongpin" icon="shop-o">结婚用品</van-tabbar-item>
      <van-tabbar-item to="/me" icon="friends-o">我们</van-tabbar-item>
    </van-tabbar>
    <go-top></go-top>
  </div>
</template>

<script>
import { areaList } from "@vant/area-data";
import GoTop from "@/components/GoTop.vue";
export default {
  components: { GoTop },
  data() {
    return {
      active: 0,
      value: "",
      active1: 0,
      areaList,
      show: false,
      img: [
        "/img/linggan3/1.jpg",
        "/img/linggan3/2.jpg",
        "/img/linggan3/3.jpg",
        "/img/linggan3/4.jpg",
        "/img/linggan3/5.jpg",
        "/img/linggan3/6.jpg",
        "/img/linggan3/7.jpg",
        "/img/linggan3/8.jpg",
      ],
      img1: [
        "/img/linggan3/2.jpg",
        "/img/linggan3/3.jpg",
        "/img/linggan3/6.jpg",
        "/img/linggan3/8.jpg",
        "/img/linggan3/1.jpg",
        "/img/linggan3/5.jpg",
        "/img/linggan3/7.jpg",
        "/img/linggan3/4.jpg",
      ],
      img2: [
        "/img/linggan3/3.jpg",
        "/img/linggan3/6.jpg",
        "/img/linggan3/8.jpg",
        "/img/linggan3/2.jpg",
        "/img/linggan3/5.jpg",
        "/img/linggan3/1.jpg",
        "/img/linggan3/7.jpg",
        "/img/linggan3/4.jpg",
      ],
      img3: [
        "/img/linggan3/5.jpg",
        "/img/linggan3/3.jpg",
        "/img/linggan3/7.jpg",
        "/img/linggan3/6.jpg",
        "/img/linggan3/2.jpg",
        "/img/linggan3/1.jpg",
        "/img/linggan3/8.jpg",
        "/img/linggan3/4.jpg",
      ],
      hunyan: [
        {
          id: 1,
          num: "3km",
          desc: "二七区|京广路",
          price: "1399.00",
          title: "雲宴喜堂",
          thumb: "/img/jiudian/1.jpg",
          tags: "婚礼一站式服务",
        },
        {
          id: 2,
          num: "4.7km",
          desc: "二七区|齐礼阎",
          price: "1198.00",
          title: "郑州鸿禧堂婚礼宴会酒店",
          thumb: "/img/jiudian/2.jpg",
          tags: "私人订制",
        },
        {
          id: 3,
          num: "5.2km",
          desc: "金水区|农业路",
          price: "2088.00",
          title: "粤港中州国际饭店",
          thumb: "/img/jiudian/3.jpg",
          tags: "全新装修",
        },
        {
          id: 4,
          num: "8km",
          desc: "经开区|东开发区",
          price: "1299.00",
          title: "东府饭店",
          thumb: "/img/jiudian/4.jpg",
          tags: "宴会厅无柱",
        },
        {
          id: 5,
          num: "10km",
          desc: "管城回族区|金色港湾",
          price: "1999.00",
          title: "河南盛世民航国际酒店",
          thumb: "/img/jiudian/5.jpg",
          tags: "方正无柱大厅",
        },
      ],
    };
  },
  methods: {
    chooseAddress() {
      this.show = true;
    },
  },
};
</script>

<style>
.index .van-nav-bar__left .van-nav-bar__text {
  color: #d22c48;
  font-size: 16px;
  font-weight: 600;
}
.index .van-tab__text--ellipsis {
  font-size: 13px;
}
.index .search {
  margin-top: 46px;
  padding: 0 10px;
}
.index .search .van-search {
  padding: 0 12px;
}
.index .search .van-search span {
  font-size: 14px;
  color: gray;
}
.index .search .van-field__left-icon {
  display: none;
}
.index .search .van-search__label {
  padding: 0 12px 0 0;
}
.index .search .van-search--show-action {
  border: 1px solid #d22c48;
  border-radius: 50px;
}
.index .search .van-search__content {
  background-color: #fff;
}
.index .search .van-search__action:active {
  background-color: #fff !important;
}
.index .body {
  margin-bottom: 50px;
  padding: 10px;
  background-color: #f8f8f8;
}
.index .body .van-grid-item__icon {
  font-size: 50px;
}
.index .body .van-grid-item__content {
  padding: 0 8px;
}
.index .body .tabs {
  margin-top: 10px;
}
.index .van-tabs__line {
  width: 20px;
}
.index .van-tab__pane {
  background-color: #fff;
}
.index .van-tab__pane .img {
  display: contents;
}
.index .van-tab__pane .img img {
  padding: 2px;
  width: 48%;
  border-radius: 5px;
}
.index .van-card__title {
  font-size: 15px;
  font-weight: bold;
}
.index .van-tabbar-item--active {
  color: red;
}
</style>